<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
		<!--什么是字体图标？
			字体图标是在 Web 项目中使用的图标字体。虽然，Glyphicons Halflings 需要商业许可，但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。
			为了表示对图标作者的感谢，希望您在使用时加上 GLYPHICONS 网站的链接
		-->
		<div class="cpl-md-10">
			<a href="http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm">
				<p class="alert-success">查看可用的图表列表</p>
			</a>
		</div>
		<!--用法
			如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。-->
		<div class="cpl-md-10">	
			<p>
				<button type="button" class="btn btn-default">
	        		<span class="glyphicon glyphicon-adjust"></span>
	   			 </button>
				<button type="button" class="btn btn-default">
	       			<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
	    		</button>
				<button type="button" class="btn btn-default">
	        		<span class="glyphicon glyphicon-sort-by-order"></span>
	    		</button>
				<button type="button" class="btn btn-default">
	        		<span class="glyphicon glyphicon-sort-by-order-alt"></span>
	    		</button>
			</p>
				<button type="button" class="btn btn-default btn-lg">
	    			<span class="glyphicon glyphicon-user"></span> User
				</button>
				<button type="button" class="btn btn-default btn-sm">
		    		<span class="glyphicon glyphicon-user"></span> User
				</button>
				<button type="button" class="btn btn-default btn-xs">
	    			<span class="glyphicon glyphicon-user"></span> User
				</button>
		</div>
		
		<!--带有字体图标的导航栏-->
		<!--强制在最上面<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">-->
		<div class="navbar  navbar-inverse" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
					<a class="navbar-brand" href="#">Project name</a>
				</div>
				<div class="collapse navbar-collapse">
					<ul class="nav navbar-nav">
						<li class="active">
							<a href="#">
								<span class="glyphicon glyphicon-home">Home</span></a>
						</li>
						<li>
							<a href="#shop">
								<span class="glyphicon glyphicon-shopping-cart">Shop</span></a>
						</li>
						<li>
							<a href="#support">
								<span class="glyphicon glyphicon-headphones">Support</span></a>
						</li>
					</ul>
				</div>
				<!-- /.nav-collapse -->
			</div>
			<!-- /.container -->
		</div>
	</body>
</html>